<template>
	<!--  先写静态页面           在对接数据 
		  先加载页面初始化数据  ，在来写页面
	-->
	<div class="header">
		<div class="content-wrapper">
			<!-- 商家的图标 -->
			<div class="avatar-wrapper">
				<img class="avatar" :src="seller.avatar" alt="">
			</div>
			<!-- 商家描述内容 -->
			<div class="content">
				<!-- 标题 -->
				<div class="title">
					<img class="title-pic" src="../assets/brand@2x.png" alt="">
					<span class="name">{{seller.name}}</span>
				</div>
				<!-- 送达方式 -->
				<div class="description">
					{{seller.description}}/{{seller.deliveryTime}}分钟送达
				</div>
				<!-- 活动 -->
				<div class="supports">
					<img class="supports-pic" src="../assets/decrease_2@2x.png" alt="">
					<span class="supports-text" v-if="seller.supports">{{seller.supports[0].description}}</span>
				</div>
				<!-- 活动展示按钮 -->
				<div class="supports-length" v-if="seller.supports">
					{{seller.supports.length}} >
				</div>
			</div>
		</div>
		<!-- 商家公告 -->
		<div></div>
	</div>
</template>

<script>
	export default {
		props: {
			seller: Object
		}
	}
</script>

<style>
	.header {
		background-color: rgba(7, 17, 27, 0.5);
	}

	.content-wrapper{
		height: 106px;
		width: 100%;
		padding: 24px 12px 18px 24px;
		box-sizing: border-box;
		/* 为了给后面的子元素提供定位流 */
		position: relative;
	}
	.avatar-wrapper{
		width: 64px;
		height: 64px;
		margin-right: 16px;	
		float: left;
	}
	.avatar{
		width: 100%;
		height: 100%;
		border-radius: 2px;
	}
	.content{
		float: left;
	}
	.title{
		height: 20px;	
	}
	.title-pic{
		width: 30px;
		height: 18px;
		margin-top: 2px;
		margin-right: 6px;
		float: left;
	}
	.name{
		font-size: 16px;
		color: rgb(255, 255, 255);
		font-weight: bold;
		line-height: 18px;
		float: left;
	}
	.description{
		font-size: 12px;
		color: rgb(255, 255, 255);
		font-weight:200;
		line-height: 12px;
		margin-top: 8px;
		margin-bottom: 10px;
	}
	.supports{
		height: 12px;
		font-size: 10px;
		color: rgb(255, 255, 255);
		font-weight:200;
		line-height: 12px;
	}
	.supports-pic{
		width: 12px;
		height: 12px;
		float: left;
		margin-right: 4px;
	}
	.supports-length{
		position: absolute;
		right: 12px;
		bottom: 18px;
		background-color: rgba(0, 0, 0, 0.2);
		font-size: 10px;
		color: rgb(255, 255, 255);
		font-weight:200;
		line-height: 12px;
		padding: 7px 8px;
		border-radius: 12px;	
	}
</style>
